<template>
  <div class="data-line">
    <div class="title">
      数据统计
      <!-- <div style="float: right">
        <a-range-picker
          style="width: 254px; marginbottom: 20px"
          @change="change"
      /></div> -->
    </div>
    <Chart :options="option" height="88%"></Chart>
  </div>
</template>

<script lang="ts">
  import { ref, defineComponent } from 'vue';
  import { graphic } from 'echarts/core';
  import { Message } from '@arco-design/web-vue';
  import { queryDataStatistics } from '@/api/dashboard';

  export default defineComponent({
    setup: () => {
      const option = ref({
        grid: {
          left: 40,
          right: 40,
          top: 20,
          bottom: 40,
        },
        tooltip: {
          trigger: 'axis',
          position(pt: any[]) {
            return [pt[0], '10%'];
          },
        },
        color: ['rgba(67, 112, 248, 1)', 'rgba(97, 184, 255, 1)'],
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [],
            name: '数据异常人数',
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(67, 112, 248, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(67, 112, 248, 0)',
                },
              ]),
            },
          },
          {
            data: [],
            type: 'line',
            name: '数据正常人数',
            smooth: true,
            areaStyle: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(97, 184, 255, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(97, 184, 255, 0)',
                },
              ]),
            },
          },
        ],
      });
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      const change = () => {};
      const initOption = async () => {
        const { code, msg, data } = await queryDataStatistics();
        if (code !== 200) {
          Message.error(msg);
          return;
        }
        option.value.xAxis.data = data.map(
          (item: { dateTime: any }) => item.dateTime
        );
        option.value.series[0].data = data.map(
          (item: { abnormalNum: any; dateTime: any }) => item.abnormalNum
        );
        option.value.series[1].data = data.map(
          (item: { normalNum: any; dateTime: any }) => item.normalNum
        );
      };
      initOption();
      return {
        option,
        change,
      };
    },
  });
</script>

<style lang="less" scoped>
  .data-line {
    height: 300px;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin-bottom: 22px;
  }
</style>
